
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jQuery Webforms 2.0 Test</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="../src/jquery.webforms2.js"></script>
    
	<script type="text/javascript">
		 $(document).ready(function() {
			$('form').webforms2({
				warningInputIsRequired:	'{0} cannot be empty.',
				cssPath:				'./css/',
				jsPath:					'../lib/',
				datepickerOptions:{
					dateFormat:			'dd.mm.yy'
				}
			});
		  });

	</script>
	<link  rel="stylesheet" type="text/css" href="css/default.css" title="default"></link>

</head>
<body>

<form method="post">
	<h1>jQuery Html 5.0 Form Test</h1>
	<fieldset>
		<legend>Test form</legend>

		<div>
			<label for="text">Regular Text</label>
			<input name="text" id="text" placeholder="Text" />
		</div>
		<div>
			<label for="reqtext">Required Text</label>
			<input name="reqtext" id="reqtext" required="required" />
		</div>
		<div>
			<label for="pattext">Pattern text</label>
			<input name="pattext" id="pattext" required="required" pattern="[a-z]{3,10}" title="The pattern text needs to be only letters and between 3 - 10 characters" />
		</div>
		<div>
			<label for="number">Number</label>
			<input name="number" id="number" type="number" required="required" />
		</div>
		<div>
			<label for="date">Date</label>
			<input name="date" id="date" type="date" required="required" />
		</div>
		<div>
			<label for="mmdate">Min &amp; Max Date</label>
			<input name="mmdate" id="mmdate" type="date" min="2009-10-20" max="2009-11-25" required="required" />
		</div>
		<div>
			<label for="time">Time</label>
			<input name="time" id="time" type="time" required="required" />
		</div>
		<div>
			<label for="datetime-local">Datetime-local</label>
			<input name="datetime-local" id="datetime-local" type="datetime-local" required="required" />
		</div>
		<div>
			<label for="email">Email</label>
			<input name="email" id="email" type="email" required="required" />
		</div>
		<div>
			<label for="url">Url</label>
			<input name="url" id="url" type="url" required="required" />
		</div>
		<div>
			<label for="color">Color</label>
			<input name="color" id="color" type="color" required="required" />
		</div>
		<div>
			<label for="range">Range</label>
			<input name="range" id="range" type="range2" required="required" />
		</div>
		<div>
			<label for="textarea">Textarea with maxlength 100</label>
			<textarea name="textarea" id="textarea" maxlength="100"></textarea>
		</div>
		
	</fieldset>
	<input type="submit" value="Send" />
</form>


</body>
</html>